<!--#UTF-8--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3+SVG制作节日庆祝的五彩纸屑动画 -CSS代码 -演示与下载 -时代Java</title>
<style>
svg {
    background: #FFEFE9;
    padding-left: 250px;
    padding-top: 80px;
}
.conf0 {
    fill: #FC6394;
}
.conf1 {
    fill: #EF3C8A;
}
.conf2 {
    fill: #5ADAEA;
}
.conf3 {
    fill: #974CBE;
}
.conf4 {
    fill: #3CBECD;
}
.conf5 {
    fill: #813BBE;
}
.conf6 {
    fill: #F9B732;
}
.conf7 {
    display: none;
    fill: none;
    stroke: #000000;
    stroke-miterlimit: 10;
}
.conf8 {
    fill: none;
    stroke: #F9B732;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
.confetti-cone {
    transform-origin: 200px 50px;
    animation: confetti-cone1 1.2s ease infinite;
}
@keyframes confetti-cone1 {
    0% {
        transform: translate(40px, 95px) rotate(45deg) scale(1, 1);
    }
    15% {
        transform: translate(10px, 145px) rotate(45deg) scale(1.1, 0.85);
    }
    100% {
        transform: translate(40px, 105px) rotate(45deg) scale(1, 1);
    }
}
#yellow-strip {
    fill: none;
    stroke: #F9B732;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    animation: confdash 1.2s ease infinite;
}
@keyframes confdash {
    0% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 500;
        transform: translate(-30px, 30px);
        opacity: 0;
    }
    2% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 500;
        transform: translate(-30px, 30px);
        opacity: 0;
    }
    35% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 900;
        transform: translate(-2px, 0px);
        opacity: 1;
    }
    85% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        transform: translate(1px, -5px);
        opacity: 1;
    }
    90% {
        stroke-dashoffset: 1000;
        stroke-dashoffset: 1000;
        transform: translate(2px, -8px);
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 1000;
        stroke-dashoffset: 500;
        transform: translate(2px, -8px);
        opacity: 0;
    }
}
#conf-a {
    transform-origin: center center;
    animation: confa 1.2s ease-out infinite;
}
@keyframes confa {
    0% {
        opacity: 0;
        transform: translate(-30px, 20px) rotate(0);
    }
    15% {
        opacity: 1;
        transform: translate(25px, -10px) rotate(60deg);
    }
    80% {
        opacity: 1;
        transform: translate(33px, -18px) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(37px, -23px) scale(0.5)rotate(230deg);
    }
}
#conf-b {
    transform-origin: center center;
    animation: confb 1.2s ease-out infinite;
}
@keyframes confb {
    0% {
        opacity: 0;
        transform: translate(-30px, 20px) rotate(0);
    }
    12% {
        opacity: 1;
        transform: translate(25px, -10px) rotate(60deg);
    }
    76% {
        opacity: 1;
        transform: translate(33px, -18px) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(37px, -23px) scale(0.5) rotate(240deg);
    }
}
#conf-c {
    transform-origin: center center;
    animation: confc 1.2s ease-out infinite;
}
@keyframes confc {
    0% {
        opacity: 0.7;
        transform: translate(-30px, 20px) rotate(0);
    }
    18% {
        opacity: 1;
        transform: translate(5px, -10px) rotate(60deg);
    }
    76% {
        opacity: 1;
        transform: translate(13px, -18px) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(17px, -23px) scale(0.5) rotate(230deg);
    }
}
#conf-d {
    transform-origin: center center;
    animation: confd 1.2s ease-out infinite;
}
@keyframes confd {
    0% {
        opacity: 0.7;
        transform: translate(-20px, 20px) rotate(0);
    }
    18% {
        opacity: 1;
        transform: translate(-5px, -10px) rotate(60deg);
    }
    76% {
        opacity: 1;
        transform: translate(-8px, -18px) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(-10px, -23px) scale(0.5) rotate(230deg);
    }
}
</style>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 800" style="enable-background:new 0 0 1200 800;" xml:space="preserve">
    <g class="confetti-cone">
        <path class="conf0" d="M131.5,172.6L196,343c2.3,6.1,11,6.1,13.4,0l65.5-170.7L131.5,172.6z" />
        <path class="conf1" d="M131.5,172.6L196,343c2.3,6.1,11,6.1,13.4,0l6.7-17.5l-53.6-152.9L131.5,172.6z" />

        <path class="conf2" d="M274.2,184.2c-1.8,1.8-4.2,2.9-7,2.9l-129.5,0.4c-5.4,0-9.8-4.4-9.8-9.8c0-5.4,4.4-9.8,9.9-9.9l129.5-0.4
     				c5.4,0,9.8,4.4,9.8,9.8C277,180,275.9,182.5,274.2,184.2z" />
        <polygon class="conf3" points="231.5,285.4 174.2,285.5 143.8,205.1 262.7,204.7 			" />
        <path class="conf4" d="M166.3,187.4l-28.6,0.1c-5.4,0-9.8-4.4-9.8-9.8c0-5.4,4.4-9.8,9.9-9.9l24.1-0.1c0,0-2.6,5-1.3,10.6
     				C161.8,183.7,166.3,187.4,166.3,187.4z" />
        <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -89.8523 231.0278)" class="conf2" cx="233.9" cy="224" rx="5.6" ry="5.6" />
        <path class="conf5" d="M143.8,205.1l5.4,14.3c6.8-2.1,14.4-0.5,19.7,4.8c7.7,7.7,7.6,20.1-0.1,27.8c-1.7,1.7-3.7,3-5.8,4l11.1,29.4
     				l27.7,0l-28-80.5L143.8,205.1z" />
        <path class="conf2" d="M169,224.2c-5.3-5.3-13-6.9-19.7-4.8l13.9,36.7c2.1-1,4.1-2.3,5.8-4C176.6,244.4,176.6,231.9,169,224.2z" />
        <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -119.0946 221.1253)" class="conf6" cx="207.4" cy="254.3" rx="11.3" ry="11.2" />
    </g>

    <rect x="113.7" y="135.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -99.5348 209.1582)" class="conf7" width="178" height="178" />
    <line class="conf7" x1="76.8" y1="224.7" x2="328.6" y2="224.7" />
    <polyline class="conf7" points="202.7,350.6 202.7,167.5 202.7,98.9 	" />
    <!-- here comes the confettis-->

    <circle class="conf2" id="conf-b" cx="195.2" cy="232.6" r="5.1" />
    <circle class="conf0" id="conf-b" cx="230.8" cy="219.8" r="5.4" />
    <circle class="conf0" id="conf-c" cx="178.9" cy="160.4" r="4.2" />
    <circle class="conf6" id="conf-d" cx="132.8" cy="123.6" r="5.4" />
    <circle class="conf0" id="conf-d" cx="151.9" cy="105.1" r="5.4" />

    <path class="conf0" id="conf-d" d="M129.9,176.1l-5.7,1.3c-1.6,0.4-2.2,2.3-1.1,3.5l3.8,4.2c1.1,1.2,3.1,0.8,3.6-0.7l1.9-5.5
      		C132.9,177.3,131.5,175.7,129.9,176.1z" />
    <path class="conf6" id="conf-b" d="M284.5,170.7l-5.4,1.2c-1.5,0.3-2.1,2.2-1,3.3l3.6,3.9c1,1.1,2.9,0.8,3.4-0.7l1.8-5.2
      		C287.4,171.9,286.1,170.4,284.5,170.7z" />
    <circle class="conf6" id="conf-c" cx="206.7" cy="144.4" r="4.5" />
    <path class="conf2" id="conf-c" d="M176.4,192.3h-3.2c-1.6,0-2.9-1.3-2.9-2.9v-3.2c0-1.6,1.3-2.9,2.9-2.9h3.2c1.6,0,2.9,1.3,2.9,2.9v3.2
      		C179.3,191,178,192.3,176.4,192.3z" />
    <path class="conf2" id="conf-b" d="M263.7,197.4h-3.2c-1.6,0-2.9-1.3-2.9-2.9v-3.2c0-1.6,1.3-2.9,2.9-2.9h3.2c1.6,0,2.9,1.3,2.9,2.9v3.2
      		C266.5,196.1,265.2,197.4,263.7,197.4z" />
    <!-- yellow-strip-1-->
    <path id="yellow-strip" d="M179.7,102.4c0,0,6.6,15.3-2.3,25c-8.9,9.7-24.5,9.7-29.7,15.6c-5.2,5.9-0.7,18.6,3.7,28.2
      		c4.5,9.7,2.2,23-10.4,28.2" />
    <path class="conf8" id="yellow-strip" d="M252.2,156.1c0,0-16.9-3.5-28.8,2.4c-11.9,5.9-14.9,17.8-16.4,29c-1.5,11.1-4.3,28.8-31.5,33.4" />
    <path class="conf0" id="conf-a" d="M277.5,254.8h-3.2c-1.6,0-2.9-1.3-2.9-2.9v-3.2c0-1.6,1.3-2.9,2.9-2.9h3.2c1.6,0,2.9,1.3,2.9,2.9v3.2
      		C280.4,253.5,279.1,254.8,277.5,254.8z" />
    <path class="conf3" id="conf-c" d="M215.2,121.3L215.2,121.3c0.3,0.6,0.8,1,1.5,1.1l0,0c1.6,0.2,2.2,2.2,1.1,3.3l0,0c-0.5,0.4-0.7,1.1-0.6,1.7v0
      		c0.3,1.6-1.4,2.8-2.8,2l0,0c-0.6-0.3-1.2-0.3-1.8,0h0c-1.4,0.7-3.1-0.5-2.8-2v0c0.1-0.6-0.1-1.3-0.6-1.7l0,0
      		c-1.1-1.1-0.5-3.1,1.1-3.3l0,0c0.6-0.1,1.2-0.5,1.5-1.1v0C212.5,119.8,214.5,119.8,215.2,121.3z" />
    <path class="conf3" id="conf-b" d="M224.5,191.7L224.5,191.7c0.3,0.6,0.8,1,1.5,1.1l0,0c1.6,0.2,2.2,2.2,1.1,3.3v0c-0.5,0.4-0.7,1.1-0.6,1.7l0,0
      		c0.3,1.6-1.4,2.8-2.8,2h0c-0.6-0.3-1.2-0.3-1.8,0l0,0c-1.4,0.7-3.1-0.5-2.8-2l0,0c0.1-0.6-0.1-1.3-0.6-1.7v0
      		c-1.1-1.1-0.5-3.1,1.1-3.3l0,0c0.6-0.1,1.2-0.5,1.5-1.1l0,0C221.7,190.2,223.8,190.2,224.5,191.7z" />
    <path class="conf3" id="conf-a" d="M312.6,242.1L312.6,242.1c0.3,0.6,0.8,1,1.5,1.1l0,0c1.6,0.2,2.2,2.2,1.1,3.3l0,0c-0.5,0.4-0.7,1.1-0.6,1.7v0
      		c0.3,1.6-1.4,2.8-2.8,2l0,0c-0.6-0.3-1.2-0.3-1.8,0h0c-1.4,0.7-3.1-0.5-2.8-2v0c0.1-0.6-0.1-1.3-0.6-1.7l0,0
      		c-1.1-1.1-0.5-3.1,1.1-3.3l0,0c0.6-0.1,1.2-0.5,1.5-1.1v0C309.9,240.6,311.9,240.6,312.6,242.1z" />
    <path class="conf8" id="yellow-strip" d="M290.7,215.4c0,0-14.4-3.4-22.6,2.7c-8.2,6.2-8.2,23.3-17.1,29.4c-8.9,6.2-19.8-2.7-32.2-4.1
      		c-12.3-1.4-19.2,5.5-20.5,10.9" />
    <!-- </g> -->
</svg>
<!-- <style>.nowjava-demo-box{position:fixed;background-color:rgba(255,255,255,0.25);top:110px;right:5px;z-index:99998;visibility:hidden;opacity:0;pointer-events:none;transition:all .3s;width:200px;height:260px;font-family:"pingfang SC","helvetica neue",arial,"hiragino sans gb","microsoft yahei ui","microsoft yahei",simsun,sans-serif;font-size:15px}.nowjava-demo-box:target{visibility:visible;opacity:1;pointer-events:auto}.nowjava-demo-box>div{width:200px;height:260px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:rgba(0,0,0,0.4);font-size:15px;color:#fff;overflow:auto}.nowjava-demo-box .ctt{margin:0 2px 0 2px}.nowjava-demo-box h1{font-size:16px;margin:20px 2px 5px 2px}.nowjava-demo-box-close{color:#eee;line-height:22px;font-size:80%;position:absolute;right:0;text-align:center;top:0;width:50px;text-decoration:none}.nowjava-demo-box-close:hover{color:#ccc}.nowjava-demo-box-container{width:128px;height:34px;background-color:rgba(0,0,0,0.6);line-height:34px;text-align:center;color:#fff;font-size:13px;position:fixed;top:70px;right:5px;z-index:99999;cursor:pointer;border:1px solid #ccc;font-family:"pingfang SC","helvetica neue",arial,"hiragino sans gb","microsoft yahei ui","microsoft yahei",simsun,sans-serif}.nowjava-demo-box-container a{color:#fff}.nowjava-demo-box-container a:hover{color:#ddd}.nowjava-demo-box-container div:not(:last-of-type){margin-bottom:15px}.nowjava-demo-box-container .nowjava-d-btn{padding:0.2em;border-radius:3px;text-decoration:none}.nowjava-demo-box-container .nowjava-btn-icon{float:left;padding-left:10px;height:32px;line-height:32px;}.nowjava-demo-box-container .nowjava-btn-icon svg{margin:0;padding:0;width:16px;height:32px;line-height:32px;}</style><div class="nowjava-demo-box-container"><div class="interior"><div class="nowjava-btn-icon"><svg t="1586501309977" viewBox="0 0 1265 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14328" width="16" height="16"><path d="M1025.724758 311.892298A401.369796 401.369796 0 0 0 298.08016 182.41817a310.737906 310.737906 0 0 0 25.894826 621.475813 51.789651 51.789651 0 0 0 0-103.579302 207.158604 207.158604 0 0 1 0-414.317209h16.31374l5.178965-1.553689 4.40212-1.812638 4.661069-2.589483 3.884224-2.330534a27.707463 27.707463 0 0 0 4.143172-3.625276l3.366327-3.107379a20.456912 20.456912 0 0 0 3.107379-3.884223 22.787446 22.787446 0 0 0 3.107379-4.402121l1.294742-1.812638a298.049442 298.049442 0 0 1 557.515593 110.570905v1.55369a6.214758 6.214758 0 0 0 0 2.071586c0 2.589483 0 5.178965 1.812638 7.768448v1.553689a51.789651 51.789651 0 0 0 3.625276 7.768448 51.789651 51.789651 0 0 0 44.021203 25.894825h8.027396a133.876248 133.876248 0 0 1 21.751654-2.589482 142.42154 142.42154 0 0 1 0 284.843081H971.345624a51.789651 51.789651 0 0 0 0 103.579302h38.842239a245.741894 245.741894 0 0 0 15.536895-492.001685z" fill="#ffffff" p-id="14329"></path><path d="M781.795501 803.893983l-87.783458 87.783459V519.050902a38.842238 38.842238 0 0 0-77.684477 0v372.367591L528.803056 803.893983a38.842238 38.842238 0 0 0-54.89703 55.155978l153.815263 153.815264a35.734859 35.734859 0 0 0 12.170568 8.027396 41.949617 41.949617 0 0 0 13.983206 2.589482 38.065394 38.065394 0 0 0 14.501103-2.84843 38.842238 38.842238 0 0 0 13.206361-9.063189l153.556315-153.556316A38.842238 38.842238 0 1 0 781.795501 803.893983z" fill="#ffffff" p-id="14330"></path></svg></div><a class="nowjava-d-btn" target="_blank" href="https://nowjava.com/download/17872">下载代码</a><a class="nowjava-d-btn" href="#nowjava-open-box">说明</a></div></div><div id="nowjava-open-box" class="nowjava-demo-box"><div><a href="#nowjava-close-box" title="关闭" class="nowjava-demo-box-close">X关闭</a><h1>纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码</h1><div class="ctt">这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。</div></div></div><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?85351496e33f9c28bf5d2532431429fe";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></body> -->
</html>